<template>
	<view class="wrap">
		<view class="wrap__header">
			<text class="header__title">{{$t('mine.title')}}</text>
			  <image src="@/static/icons/msg.png" class="header__icon" @click="jump()"></image>
				
		</view>
		<view class="wrap__user" @click="navTo('/pages/mine/userInfo')">
			<image :src="userInfo.avatar" mode="aspectFill" class="user__avatar" v-if="userInfo.avatar"></image>
			<image src="@/static/my/avatar.png" mode="aspectFill" class="user__avatar" v-else></image>
			<view class="user__info">
				<view class="info__account">ID:{{userInfo.id}}</view>
				<view class="info__name">{{$t('user.nickname')}}：{{userInfo.nickname}}</view>
			</view>
		</view>
		<view class="wrap__banner" v-if="false">
			<view class="banner__item" @click="navTo('/pages/mine/inviteFriends')">
				<text class="item__title">{{$t('mine.invite')}}</text>
			</view>
			<view class="banner__item" @click="companyClick">
				<text class="item__title">{{$t('mine.company')}}</text>
			</view>
		</view>
		<view class="wrap__menu">
			<view class="menu__item" v-for="(item, index) in menuList" :key="index" @click="menuClick(item)">
				<picker @change="langChange" :value="langIndex" :range="langList" range-key="name" v-if="item.name==='language'">
						<view class="item__left">
							<image :src="item.icon" mode="widthFix" class="left__icon"></image>
							<text class="left__title">{{$t(item.title)}}</text>
							<view class="left__value">
								<text class="value__text">{{curLang}}</text>
								<uni-icons type="right" color="#fff" size="20"></uni-icons>
							</view>
						</view>
				</picker>
				<picker @change="styleChange" :value="styleIndex" :range="styleOptions" range-key="name" v-else-if="item.name==='style'">
						<view class="item__left">
							<image :src="item.icon" mode="widthFix" class="left__icon"></image>
							<text class="left__title">{{$t(item.title)}}</text>
							<view class="left__value">
								<text class="value__text">{{styleOptions[styleIndex]}}</text>
								<uni-icons type="right" color="#fff" size="20"></uni-icons>
							</view>
						</view>
				</picker>
				<view class="item__left" v-else>
					<image :src="item.icon" mode="widthFix" class="left__icon"></image>
					<text class="left__title">{{$t(item.title)}}</text>
					<uni-icons type="right" color="#fff" size="20"></uni-icons>
				</view>
			</view>
		</view>
		<view class="wrap__btn">
			<text class="btn__text" @click="quitClick">{{$t('mine.quit')}}</text>
		</view>
	</view>
</template>
<script>
	import {mapState} from 'vuex'
	export default{
		data(){
			return {
				menuList:[
					// {title:'mine.bank', icon:"/static/my/bank_icon.png", url:"/pages/account/bankCards"},
					{title:'mine.password', icon:"/static/my/password_icon.png",url:"/pages/login/resetPwd"},
					// {title:'mine.server', icon:"/static/my/server_icon.png", name:"kefu_url"},
					{title:'mine.language', icon:"/static/my/language_icon.png", name:"language"},
					{title:'mine.protocol', icon:"/static/my/protocol_icon.png", name:"protocol"},
					{title:'mine.privacy', icon:"/static/my/privacy_icon.png", name:"privacy"},
					{title:'mine.company', icon:"/static/my/company.png", name:"company"},
					// {title:'mine.style', icon:"/static/my/kline.png", name:"style"},
				],
				langIndex:0,
				curLang:"", //当前语言
				langList:[//语言列表
					{name:this.$t('language.kro'), value:"kro"},
					{name:this.$t('language.en'), value:"en"},
					// {name: '中文', value:"cn"},
				],
				styleOptions:["黑", "白"], //樣式選項
				styleIndex:0,
			}
		},
		computed:{
			...mapState("user", ["userInfo", "configData"]),
		},
		onLoad() {
			let kStyle = uni.getStorageSync("kStyle")
			if(kStyle){
				this.styleIndex = kStyle
			}
			// 获取语言信息
			let language = uni.getStorageSync("language")
			let index = this.langList.findIndex(item=>{
				return item.value === language
			})
			this.langIndex = index
			this.curLang =this.langList[index].name
			
			this.getConfig()
		},
		onShow() {
			// 是否登录
			let token = uni.getStorageSync("token")
			if(!token){
				uni.navigateTo({
					url:"/pages/login/login"
				})
			}
		},
		methods:{
			async getConfig(){
				let res = await this.$api.getConfig()
				if(res.code === 1 && res.data){
					this.msgList = res.data
				
				}
			},
			jump(){
				window.location.href = this.msgList.msg_text
			},
			//退出登陆
			quitClick(){
				uni.showModal({
					title:this.$t("modal.title"),
					content:this.$t("modal.tips"),
					success:({confirm})=> {
						if(confirm){
							this.$store.commit("user/clearUserInfo")
							uni.navigateTo({
								url:"/pages/login/login"
							})
						}
					}
				})
			},
			// 菜单点击
			menuClick(item){
				let {url, name, title} = item

				if(url){
					uni.navigateTo({
						url
					})
					return
				}
				if(name){
					if(name === "protocol" || name==="privacy" || name==="company"){ //隐私政策服务协议
						uni.navigateTo({
							url:`/pages/mine/content?title=${title}`
						})
					}else if(name==="kefu_url"){ //客服
						let info = this.configData.find(item=>{
							return item.name === name
						})
						if(info.value){
							window.location.href= info.value
						}
					}
				}
			},
			// 导航跳转
			navTo(url){
				uni.navigateTo({
					url
				})
			},

			// 语言切换
			langChange(e){
				let {value} = e.detail
				this.langIndex = value
				let language = this.langList[value]
				this.curLang = language.name
				uni.setStorageSync("language", language.value)
				uni.setLocale(language.value)
				this.$i18n.locale = language.value
				uni.reLaunch({
					url: '/pages/mine/mine'
				});
			},
			// key綫樣式切換
			styleChange(e){
				let {value} = e.detail
				if(this.styleIndex !== value){
					this.styleIndex = value
					uni.setStorageSync("kStyle", value)
				}
				console.log(e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap{
		min-height: 100vh;
		padding: 0 30rpx;
		padding-top: 50rpx;
		box-sizing: border-box;
		&__header{
			@include flexRowAlign(space-between);
			.header__title{
				font-size: 46rpx;
				font-weight: 800;
				color: #fff;
			
			}
			.header__icon{
				width: 34rpx;
				height: 34rpx;
			}
		}
		&__user{
			@include flexRowAlign();
			margin-top: 42rpx;
			padding-bottom: 40rpx;
			.user__avatar{
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}
			.user__info{
				margin-left: 34rpx;
				font-size: 26rpx;
				color: #fff;
				.info__name{
					margin-top: 16rpx;
				}
			}
		}
		&__banner{
			margin-top: 60rpx;
			@include flexRowAlign(space-between);
			.banner__item{
				width: 320rpx;
				height: 140rpx;
				background: url('@/static/my/invite_bg.png') no-repeat center center;
				background-size: 100% 100%;
				@include flexCenter();
				justify-content: flex-start;
				padding-left: 40rpx;
				box-sizing: border-box;
				&:last-child{
					background-image: url('@/static/my/brief_bg.png') ;
				}
				.item__title{
					font-size: 30rpx;
					font-weight: 800;
					color: #FFFFFF;
				}
			}
		}
		&__menu{
			margin-top: 60rpx;
			.menu__item{
				height: 88rpx;
				@include flexRowAlign(space-between);
				.item__left{
					@include flexRowAlign();
					width: 690rpx;
					.left__icon{
						width: 40rpx;
						height: 42rpx;
					}
					.left__title{
						margin-left: 20rpx;
						font-size: 28rpx;
						color: #fff;
						flex: 1;
					}
					.left__value{
						flex: 1;
						@include flexRowAlign(flex-end);
						.value__text{
							color: #fff;
							font-size: 28rpx;
							margin-right: 10rpx;
						}
					}
				}
			}
		}
		&__btn{
			@include flexRowAlign(center);
			margin-top: 50rpx;
			.btn__text{
				width: 480rpx;
				height: 88rpx;
				background: #458EF4;
				border-radius: 10rpx;
				font-size: 30rpx;
				color: #fff;
				@include flexCenter();
			}
		}
	}
</style>